<template>
	<div>
	  <!-- 使用 Table 组件 -->
	  <Table
		:tableData="tableData"
		:filters="filters"
		@filter="handleFilter"
		@reset="resetFilter"
		@edit="handleEdit"
		@delete="handleDelete"
	  />
	</div>
  </template>
  
  <script>
  import { ref, reactive, onMounted } from 'vue';
  import Table from './part/table.vue';
  
  export default {
	components: {
	  Table,
	},
	setup() {
	  const dialogTableVisible = ref(false);
	  const dialogFormVisible = ref(false);
	  const formLabelWidth = '140px';
  
	  const form = reactive({
		name: '',
		region: '',
		date1: '',
		date2: '',
		delivery: false,
		type: [],
		resource: '',
		desc: '',
	  });
  
	  const tableData = ref([
		{
		  declarationDate: '2025-02-25',
		  importDate: '2025-02-20',
		  customsDeclarationNumber: '722020231201001237',
		  billOfLadingNumber: '12',
		  consumptionUnit: '单位A',
		  domesticConsignee: '收货人A',
		  declarationUnit: '申报单位A',
		  products: [
			{ id: 1, productName: '商品A', productCode: 'A001' },
			{ id: 2, productName: '商品B', productCode: 'B002' },
		  ],
		},
		{
		  declarationDate: '2025-02-26',
		  importDate: '2025-02-21',
		  customsDeclarationNumber: '2',
		  billOfLadingNumber: '13',
		  consumptionUnit: '单位B',
		  domesticConsignee: '收货人B',
		  declarationUnit: '申报单位B',
		  products: [
			{ id: 1, productName: '商品C', productCode: 'C003' },
			{ id: 2, productName: '商品D', productCode: 'D004' },
		  ],
		},
		{
		  declarationDate: '2025-02-27',
		  importDate: '2025-02-22',
		  customsDeclarationNumber: '3',
		  billOfLadingNumber: '14',
		  consumptionUnit: '单位C',
		  domesticConsignee: '收货人C',
		  declarationUnit: '申报单位C',
		  products: [
			{ id: 1, productName: '商品E', productCode: 'E005' },
			{ id: 2, productName: '商品F', productCode: 'F006' },
		  ],
		},
	  ]);
  
	  const filters = ref({
		customsDeclarationNumber: '',
		billOfLadingNumber: '',
		consumptionUnit: '',
		declarationUnit: '',
		declarationDate: '', // 设置筛选条件
		importDate: '',
		selectedProductName: '', // 初始化 selectedProductName 属性
		productCode: '',
		domesticConsignee: '',
	  });
  
	  const exportVisible = ref(false);
  
	  const handleFilter = () => {
		console.log('筛选条件', filters.value);
		// 在这里添加筛选逻辑
	  };
  
	  const resetFilter = () => {
		filters.value = {
		  customsDeclarationNumber: '',
		  billOfLadingNumber: '',
		  consumptionUnit: '',
		  declarationUnit: '',
		  declarationDate: '',
		  importDate: '',
		  selectedProductName: '', // 初始化 selectedProductName 属性
		  productCode: '',
		  domesticConsignee: '',
		};
	  };
  
	  const handleEdit = (row) => {
		console.log('编辑', row);
		// 在这里添加编辑逻辑
	  };
  
	  const handleDelete = (row) => {
		console.log('删除', row);
		// 在这里添加删除逻辑
	  };
  
	  const showExport = () => {
		exportVisible.value = true;
	  };
  
	  const closeExport = () => {
		exportVisible.value = false;
	  };
  
	  onMounted(() => {
		handleFilter();
	  });
  
	  return {
		dialogTableVisible,
		dialogFormVisible,
		formLabelWidth,
		form,
		tableData,
		filters,
		exportVisible,
		handleFilter,
		resetFilter,
		handleEdit,
		handleDelete,
		showExport,
		closeExport,
	  };
	},
  };
  </script>
  
  <style scoped>
  /* 添加一些样式以适应您的需求 */
  </style>